<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部导航栏-->
<header th:fragment="NavigationBar" class="header">
    <nav class="navbar navbar-expand-lg px-4 py-2 bg-white shadow"><a href="#"
                                                                      class="sidebar-toggler text-gray-500 mr-4 mr-lg-5 lead"><i
            class="fas fa-align-left"></i></a><a th:href="@{/index}"
                                                 class="navbar-brand font-weight-bold text-uppercase text-base">Bubbly
        Dashboard</a>
        <ul class="ml-auto d-flex align-items-center list-unstyled mb-0">
            <li class="nav-item">
                <form id="searchForm" class="ml-auto d-none d-lg-block">
                    <div class="form-group position-relative mb-0">
                        <button type="submit" style="top: -3px; left: 0;"
                                class="position-absolute bg-white border-0 p-0"><i
                                class="o-search-magnify-1 text-gray text-lg"></i></button>
                        <input type="search" placeholder="Search ..."
                               class="form-control form-control-sm border-0 no-shadow pl-4">
                    </div>
                </form>
            </li>
            <li class="nav-item">
                <div style="position: relative">
                    <button th:replace="~{commons/commons::LanguageBtn}"></button>
                    <div th:replace="~{commons/commons::LanguageListAll}" style="position:relative;"></div>

                </div>
            </li>
            <li class="nav-item dropdown mr-3"><a id="notifications" th:href="@{#}" data-toggle="dropdown"
                                                  aria-haspopup="true" aria-expanded="false"
                                                  class="nav-link dropdown-toggle text-gray-400 px-1"><i
                    class="fa fa-bell"></i><span class="notification-icon"></span></a>
                <div aria-labelledby="notifications" class="dropdown-menu"><a href="#" class="dropdown-item">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-sm bg-violet text-white"><i class="fab fa-twitter"></i></div>
                        <div class="text ml-2">
                            <p class="mb-0">You have 2 followers</p>
                        </div>
                    </div>
                </a><a href="#" class="dropdown-item">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-sm bg-green text-white"><i class="fas fa-envelope"></i></div>
                        <div class="text ml-2">
                            <p class="mb-0">You have 6 new messages</p>
                        </div>
                    </div>
                </a><a href="#" class="dropdown-item">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-sm bg-blue text-white"><i class="fas fa-upload"></i></div>
                        <div class="text ml-2">
                            <p class="mb-0">Server rebooted</p>
                        </div>
                    </div>
                </a><a href="#" class="dropdown-item">
                    <div class="d-flex align-items-center">
                        <div class="icon icon-sm bg-violet text-white"><i class="fab fa-twitter"></i></div>
                        <div class="text ml-2">
                            <p class="mb-0">You have 2 followers</p>
                        </div>
                    </div>
                </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item text-center"><small
                            class="font-weight-bold headings-font-family text-uppercase">View all notifications</small></a>
                </div>
            </li>
            <li class="nav-item dropdown ml-auto"><a id="userInfo" th:href="@{#}" data-toggle="dropdown"
                                                     aria-haspopup="true" aria-expanded="false"
                                                     class="nav-link dropdown-toggle"><img src="img/avatar-6.jpg"
                                                                                           alt="Jason Doe"
                                                                                           style="max-width: 2.5rem;"
                                                                                           class="img-fluid rounded-circle shadow"></a>
                <div aria-labelledby="userInfo" class="dropdown-menu"><a href="#" class="dropdown-item"><strong
                        class="d-block text-uppercase headings-font-family">Mark Stephen</strong><small>Web
                    Developer</small></a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">Settings</a><a href="#" class="dropdown-item">Activity log </a>
                    <div class="dropdown-divider"></div>
                    <a href="login.html" class="dropdown-item">Logout</a>
                </div>
            </li>
        </ul>
    </nav>
</header>
<!--侧边栏-->
<div th:fragment="SideBar" id="sidebar" class="sidebar py-3">
    <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">MAIN</div>
    <ul class="sidebar-menu list-unstyled">
        <li class="sidebar-list-item"><a th:href="@{/index}"
                                         th:class="${active=='index'?'sidebar-link text-muted active':'sidebar-link text-muted'}"><i
                class="o-home-1 mr-3 text-gray"></i><span th:text="#{index.home_btn}"></span></a></li>
        <li class="sidebar-list-item"><a th:href="@{/charts}"
                                         th:class="${active=='charts'?'sidebar-link text-muted active':'sidebar-link text-muted'}"><i
                class="o-sales-up-1 mr-3 text-gray"></i><span th:text="#{index.charts_btn}"></span></a></li>
        <li class="sidebar-list-item"><a th:href="@{/tables}"
                                         th:class="${active=='tables'?'sidebar-link text-muted active':'sidebar-link text-muted'}"><i
                class="o-table-content-1 mr-3 text-gray"></i><span th:text="#{index.tables_btn}"></span></a></li>
        <li class="sidebar-list-item"><a th:href="@{/forms}"
                                         th:class="${active=='forms'?'sidebar-link text-muted active':'sidebar-link text-muted'}"><i
                class="o-survey-1 mr-3 text-gray"></i><span th:text="#{index.forms_btn}"></span></a></li>
        <li class="sidebar-list-item"><a href="#" data-toggle="collapse" data-target="#pages" aria-expanded="false"
                                         aria-controls="pages" class="sidebar-link text-muted"><i
                class="o-wireframe-1 mr-3 text-gray"></i><span>Pages</span></a>
            <div id="pages" class="collapse">
                <ul class="sidebar-menu list-unstyled border-left border-primary border-thick">
                    <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">Page one</a></li>
                    <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">Page two</a></li>
                    <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">Page three</a>
                    </li>
                    <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">Page four</a></li>
                </ul>
            </div>
        </li>
        <li class="sidebar-list-item"><a href="login.html" class="sidebar-link text-muted"><i
                class="o-exit-1 mr-3 text-gray"></i><span>Login</span></a></li>
    </ul>
    <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">EXTRAS</div>
    <ul class="sidebar-menu list-unstyled">
        <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                class="o-database-1 mr-3 text-gray"></i><span>Demo</span></a></li>
        <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                class="o-imac-screen-1 mr-3 text-gray"></i><span>Demo</span></a></li>
        <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                class="o-paperwork-1 mr-3 text-gray"></i><span>Demo</span></a></li>
        <li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted"><i
                class="o-wireframe-1 mr-3 text-gray"></i><span>Demo</span></a></li>
    </ul>
</div>
<!--语言下拉菜单按钮-->
<button th:fragment="LanguageBtn" type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
    Language<span class="ui-icon-caret-1-e"></span>
</button>
<!--语言下拉菜单列表(登录页)-->
<div th:fragment="LanguageListLogin" class="dropdown-menu" style="min-width: 100px;padding: 0px">
    <a class="dropdown-item btn-info" th:href="@{/login(lang='ja_JP')}">日本語</a>
    <a class="dropdown-item btn-info" th:href="@{/login(lang='ko_KR')}">한국어</a>
    <a class="dropdown-item btn-info" th:href="@{/login(lang='zh_TW')}">繁體中文</a>
</div>
<!--语言下拉菜单列表(后台页)-->
<div th:fragment="LanguageListAll" class="dropdown-menu" style="min-width: 100px;padding: 0px">
    <a class="dropdown-item btn-info" th:href="@{${#request.servletPath}(lang='zh_CN')}">简体中文</a>
    <a class="dropdown-item btn-info" th:href="@{${#request.servletPath}(lang='en_US')}">English</a>
    <a class="dropdown-item btn-info" th:href="@{${#request.servletPath}(lang='ja_JP')}">日本語</a>
    <a class="dropdown-item btn-info" th:href="@{${#request.servletPath}(lang='ko_KR')}">한국어</a>
    <a class="dropdown-item btn-info" th:href="@{${#request.servletPath}(lang='zh_TW')}">繁體中文</a>
</div>
</html>